<template>
  <view class="wording">
    <view class="info">
      <view class="word">
        <text
          v-for="(item, index) in wordData.segList"
          :key="index"
          :class="{
            active: item.zd,
          }"
        >
          {{ item.fc }}
        </text>
      </view>
      <view class="phonetic">
        【/
        <text v-for="(item, index) in wordData.segList" :key="index">
          {{ item.ipaUs }}
        </text>
        /】
        <image
          @click="play()"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/yinliang.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="options" v-if="optionsList.length > 0">
      <view
        class="options_content"
        v-for="(item, index) in optionsList"
        :key="index"
        @click="choiceAnswer(index)"
        :class="{
          hover: choiceIndex === index,
          active: correctIndex === index && isShowAnswer,
          error: errorIndex === index && isShowAnswer,
        }"
      >
        <view class="options_box">
          {{ String.fromCharCode(index + 65) }}.{{ item }}
        </view>
        <view class="options_iamge">
          <image
            v-if="correctIndex === index && isShowAnswer"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
            mode="widthFix"
          ></image>
          <image
            v-if="errorIndex === index && isShowAnswer"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view class="btn">
      <view class="btn_content" v-if="!isShowAnswer" @click="determineChoice()">
        <text>确定</text>
      </view>
      <view
        class="btn_content"
        v-else-if="isShowAnswer && !isCorrect"
        @click="reChoice()"
      >
        <text>重新选择</text>
      </view>
      <view
        class="btn_content"
        v-else-if="isShowAnswer && isCorrect"
        @click="next()"
      >
        <text>下一题</text>
      </view>
    </view>
  </view>
</template>
<script>
import { arrayRandomly } from "@/libs/tools";
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  name: "Pronunciation-Test",
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  created() {
    this.initOptions();
  },
  data() {
    return {
      optionsList: [],
      correctIndex: -1,
      errorIndex: -1,
      choiceIndex: -1,
      isShowAnswer: false,
    };
  },
  methods: {
    initOptions() {
      let wordData = this.wordData;
      let optionsList = [];
      optionsList.push(
        wordData.optionA,
        wordData.optionB,
        wordData.optionC,
        wordData.wordParaphrase
      );
      this.optionsList = arrayRandomly(optionsList);
      this.optionsList.some((item, index) => {
        if (item === this.wordData.wordParaphrase) {
          this.correctIndex = index;
          return true;
        }
      });
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.wordAudio;
      englishAudioContext.play();
    },
    // 看词选意
    choiceAnswer(index) {
      this.choiceIndex = index;
    },
    determineChoice() {
      if (this.choiceIndex === this.correctIndex) {
        this.isCorrect = true;
        this.isShowAnswer = true;
      } else {
        this.errorIndex = this.choiceIndex;
        this.isCorrect = false;
        this.isShowAnswer = true;
      }
      this.$playBgAudio(this.isCorrect ? "correct" : "error");
      this.saveRecord();
    },
    reChoice() {
      this.errorIndex = -1;
      this.choiceIndex = -1;
      this.isCorrect = false;
      this.isShowAnswer = false;
    },
    next() {
      this.$emit("next");
    },
    saveRecord() {
      console.log("上传记录");
      this.$emit("save", this.isCorrect);
    },
  },
};
</script>
<style scoped lang="scss">
@import "./WordingTest";
</style>
  